<template>
  <!-- 报名活动页面 -->
  <view>
    <view class="signup" v-for="(sign, index) in signList" :key="index">
      <view class="title">
        <text>{{ sign.title }}</text>
      </view>
      <view class="Simg">
        <image :src="sign.image" mode="widthFix" />
      </view>
      <view class="detail">
        <view class="detail-com">
          <view class="detail-organ">
            <image :src="comImg" mode="widthFix" class="comImg" />
            <text class="organizer-text">{{ sign.organizer }}</text>
          </view>
          <view>
            <text class="pnum-text">{{ sign.pnum }}人</text>
          </view>
        </view>
        <view class="detail-bot">
          <view class="bot">
            <text class="bot-text">报名中</text>
          </view>
          <view class="bot-time">
            <image :src="timeImg" mode="widthFix" class="timeImg" />
            <text class="time-text">{{ sign.time }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { SignupItem } from '@/types/index/home'

const comImg = ref('/static/images/company.png')
const timeImg = ref('/static/images/detail_time.png')

const signList = ref<SignupItem[]>([
  {
    title: '单身青年联谊活动',
    image: '/static/images/single.png',
    organizer: '拓峰体育发展有限公司',
    pnum: '50-90',
    time: '2024/08/01',
  },
])
</script>

<style scoped>
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Alibaba PuHuiTi;
  font-weight: 800;
  font-size: 32rpx;
  color: #221815;
  line-height: 67rpx;
}

.signup .Simg image {
  border-radius: 9%;
  margin-top: 4%;
}

.detail-com {
  display: flex;
  justify-content: space-between;
}

.pnum-text {
  width: 572rpx;
  font-family: FandolHei;
  font-weight: 400;
  font-size: 28rpx;
  color: #221815;
  line-height: 58rpx;
}

.comImg {
  width: 34rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.timeImg {
  width: 27rpx;
  height: 27rpx;
}

.organizer {
  display: flex;
  align-items: center;
}

.organizer-text {
  width: 572rpx;
  font-family: FandolHei;
  font-weight: 400;
  font-size: 28rpx;
  color: #221815;
  line-height: 58rpx;
}

.detail-bot {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.bot {
  width: 22%;
  border-radius: 15%;
  background: linear-gradient(to left, #a3c2e5, #56b4e4);
}

.bot-text {
  width: 80rpx;
  height: 26rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 800;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 58rpx;
  margin-left: 15%;
}

.time-text {
  width: 118rpx;
  height: 22rpx;
  font-family: FZHei-B01S;
  font-weight: 400;
  font-size: 28rpx;
  color: #221815;
  line-height: 58rpx;
}
</style>
